<template>
  <div>
    App
    <!-- 
      插槽通信标签数据（带数据的标签） 

      分类：
        1. 默认插槽

        2. 具名（命名）插槽

        3. 作用域插槽
    -->
    <AChild>
      <!-- 默认插槽 -->
      <div>AAAAAA</div>
      <div>AAAAAA</div>
      <div>AAAAAA</div>
      <div>AAAAAA</div>
    </AChild>

    <!-- 
      一定会用默认插槽（默认插槽使用更简单） 
      最重要的内容优先使用默认插槽
    -->
    <BChild>
      <!-- 具名插槽 -->
      <template v-slot:header>
        <div>BBB header</div>
      </template>
      <!-- <template #content>
        <div>BBB content</div>
      </template> -->

      <!-- 默认插槽 -->
      <div>BBB content</div>
      <!-- 旧语法，即将废弃 -->
      <div slot="footer">BBB footer</div>
    </BChild>

    <CChild>
      <!-- 默认插槽使用作用域插槽 -->
      <!-- <template v-slot="scoped">
        <div>CCCCCC {{ scoped.num }}</div>
      </template> -->
      <!-- <template v-slot="{ num }">
        <div>CCCCCC {{ num }}</div>
      </template> -->
      <!-- <template v-slot:default="{ num }">
        <div>CCCCCC {{ num }}</div>
      </template> -->
      <template #default="{ num }">
        <div>CCCCCC {{ num }}</div>
      </template>

      <!-- 具名插槽使用作用域插槽 -->
      <template #footer="{ num }">
        <div>CCCC footer {{ num }}</div>
      </template>
    </CChild>
  </div>
</template>

<script>
import AChild from "./A.vue";
import BChild from "./B.vue";
import CChild from "./C.vue";

export default {
  name: "App",
  components: {
    AChild,
    BChild,
    CChild,
  },
};
</script>

<style></style>
